<template>
  <div class="page-container">
    <div class="scrollable-form">
      <div class="form-wrapper">
        <el-form
          :model="formData"
          label-position="left"
          label-width="106px"
          size="medium"
          :rules="rules"
          ref="myForm"
       
        >
          <!-- 断面名称 -->
          <el-form-item label="断面名称" prop="dmmc">
            <el-input v-model="formData.dmmc" />
          </el-form-item>

          <!-- 旗区名称 -->
          <el-form-item label="旗区名称" prop="xzqhcode">
            <el-select
              v-model="formData.xzqhcode"
              placeholder="请选择"
              filterable
              style="width: 100%"
              :disabled="!isEditable"
              @change="handleChange"
            >
              <el-option
                v-for="option in xzqhOptions"
                :key="option.xzqhcode"
                :label="option.xzqhname"
                :value="option.xzqhcode"
              ></el-option>
            </el-select>
          </el-form-item>

          <!-- 水质目标 -->
          <el-form-item label="水质目标" prop="szmb">
            <el-select
              v-model="formData.szmb"
              placeholder="请选择"
              filterable
              style="width: 100%"
              @change="handleSzmbChange"
            >
              <el-option
                v-for="item in szmbOptions"
                :key="item.code"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>

          <!-- 断面责任权重 -->
          <el-form-item label="断面责任权重" prop="dmquanzhong">
            <el-select
              v-model="formData.dmquanzhong"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option label="0.5" value="0.5"></el-option>
              <el-option label="1" value="1"></el-option>
            </el-select>
          </el-form-item>

          <!-- 断面流域 -->
          <el-form-item label="断面流域" prop="liuyu">
            <el-select
              v-model="formData.liuyu"
              placeholder="请选择所在流域"
              style="width: 100%"
              filterable
            >
              <!-- 添加流域选项 -->
              <el-option label="乌兰木伦河" value="乌兰木伦河"></el-option>
              <el-option label="黄河干流" value="黄河干流"></el-option>
              <el-option label="龙王沟" value="龙王沟"></el-option>
              <el-option label="黑岱沟" value="黑岱沟"></el-option>
              <el-option label="黄埔川" value="黄埔川"></el-option>
              <el-option label="孤山川" value="孤山川"></el-option>
              <el-option label="牸牛川" value="牸牛川"></el-option>
              <el-option label="无定河" value="无定河"></el-option>
              <el-option label="白河" value="白河"></el-option>
              <el-option label="都思兔河" value="都思兔河"></el-option>
              <el-option label="哈什拉川" value="哈什拉川"></el-option>
              <el-option label="罕台川" value="罕台川"></el-option>
              <el-option
                label="康巴什与伊旗左右岸"
                value="康巴什与伊旗左右岸"
              ></el-option>
              <el-option label="黑赖沟" value="黑赖沟"></el-option>
              <el-option label="西柳沟" value="西柳沟"></el-option>
              <el-option label="东柳沟" value="东柳沟"></el-option>
              <el-option label="呼斯太沟" value="呼斯太沟"></el-option>
              <el-option label="十里长川" value="十里长川"></el-option>
              <el-option label="清水川" value="清水川"></el-option>
              <el-option label="呼斯太河" value="呼斯太河"></el-option>
              <el-option label="大沟" value="大沟"></el-option>
              <el-option label="苏家沟" value="苏家沟"></el-option>
              <el-option label="毛不浪沟" value="毛不浪沟"></el-option>

              <el-option label="无" value="无"></el-option>
            </el-select>
          </el-form-item>

          <!-- 断面类型 -->
          <el-form-item label="断面类型" prop="dmlaiyuan">
            <el-select
              v-model="formData.dmlaiyuan"
              placeholder="请选择断面类型"
              style="width: 100%"
              filterable
            >
              <el-option label="国控断面" value="国控断面"></el-option>
              <el-option label="市控断面" value="市控断面"></el-option>
              <el-option label="区控断面" value="区控断面"></el-option>
            </el-select>
          </el-form-item>

          <!-- 备注 -->
          <el-form-item label="备注">
            <el-input
              v-model="formData.bz"
              type="textarea"
              :rows="4"
              placeholder="备注"
            />
          </el-form-item>
        </el-form>
      </div>
      <!-- 页面内容 -->
      <div class="btn" style="text-align: center">
        <!-- 返回按钮 -->
        <el-button style="margin-right: 20px" @click="goBack">返回</el-button>

        <!-- 提交按钮 -->
        <el-button
          type="danger"
          style="background-color: #1890ff; border-color: #1890ff"
          @click="onSubmit"
          >{{ this.button }}</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "InterfaceManagementAdd",
  data() {
    return {
      button: "新增数据",
      // width: "178px",
      isEditable: true, // 是否可编辑旗区名称
      rules: {
        dmmc: [{ required: true, message: "请输入断面名称", trigger: "blur" }],
        xzqhcode: [
          { required: true, message: "请选择旗区名称", trigger: "change" },
        ],
        szmb: [
          { required: true, message: "请选择水质目标", trigger: "change" },
        ],
        dmquanzhong: [
          { required: true, message: "请选择断面责任权重", trigger: "change" },
        ],
        liuyu: [
          { required: true, message: "请选择断面流域", trigger: "change" },
        ],
        dmlaiyuan: [
          { required: true, message: "请选择断面类型", trigger: "change" },
        ],
      },
      formData: {
        bz: null,
        createtime: null,
        dmlaiyuan: null,
        dmmc: null,
        dmquanzhong: null,
        id: null,
        jianceshijian: null,
        liuyu: null,
        szmb: null,
        szmbdm: null,
        xzqhcode: null,
        xzqhname: null,
      },
      xzqhOptions: [
        { xzqhname: "东胜区", xzqhcode: "150602" },
        { xzqhname: "康巴什区", xzqhcode: "150601" },
        { xzqhname: "达拉特旗", xzqhcode: "150621" },
        { xzqhname: "准格尔旗", xzqhcode: "150622" },
        { xzqhname: "鄂托克前旗", xzqhcode: "150623" },
        { xzqhname: "鄂托克旗", xzqhcode: "150624" },
        { xzqhname: "杭锦旗", xzqhcode: "150625" },
        { xzqhname: "乌审旗", xzqhcode: "150626" },
        { xzqhname: "伊金霍洛旗", xzqhcode: "150627" },
      ],
      szmbOptions: [
        { name: "Ⅰ类", code: 1 },
        { name: "Ⅱ类", code: 2 },
        { name: "Ⅲ类", code: 3 },
        { name: "Ⅳ类", code: 4 },
        { name: "Ⅴ类", code: 5 },
        { name: "劣Ⅴ类", code: 6 },
        // { name: "不考核", code: 7 },
      ],
    };
  },
  created() {
    this.fetchData();
  },
  mounted() {
    if (!this.$route.query.data) {
      this.button = "新增数据";
      // 标记数据已经加载完成
      this.isDataLoaded = true;
    } else {
      const routeParams = JSON.parse(this.$route.query.data);
      this.formData = routeParams;
      this.button = "修改数据";
      // 标记数据已经加载完成
      this.isDataLoaded = true;
    }
  },
  methods: {
    fetchData() {
      // 调用 user.js 中的 getData 方法
      // console.log("登录信息", this.$store.state);

      this.$api
        .getUser()
        .then((response) => {
          if (response.data.code == 906) {
            // return  alert('token已过期')
            this.$router.push(`/login`);
          }

          console.log("数据1", response.data.data.areacode);
          const userAreaCode = response.data.data.areacode; // 示例用户区域编码
          if (userAreaCode === "1506") {
            console.log("这是管理员");
            // 管理员用户
            this.isEditable = true;
          } else {
            console.log("这不是管理员");
            // 非管理员用户
            this.isEditable = false;
            // 根据用户区域编码设置旗区名称
            this.setAreaCode(userAreaCode);
          }
        })
        .catch((error) => {
          // 处理错误
          console.error(error);
        });
    },
    setAreaCode(userAreaCode) {
      switch (userAreaCode) {
        case "150601":
          this.formData.xzqhcode = "150601";
          this.formData.xzqhname = "康巴什区";

          break;
        case "150602":
          this.formData.xzqhcode = "150602";
          this.formData.xzqhname = "东胜区";
          break;
        case "150621":
          this.formData.xzqhcode = "150621";
          this.formData.xzqhname = "达拉特旗";
          break;
        case "150622":
          this.formData.xzqhcode = "150622";
          this.formData.xzqhname = "准格尔旗";
          break;
        case "150623":
          this.formData.xzqhcode = "150623";
          this.formData.xzqhname = "鄂托克前旗";
          break;
        case "150624":
          this.formData.xzqhcode = "150624";
          this.formData.xzqhname = "鄂托克旗";
          break;
        case "150625":
          this.formData.xzqhcode = "150625";
          this.formData.xzqhname = "杭锦旗";
          break;
        case "150626":
          this.formData.xzqhcode = "150626";
          this.formData.xzqhname = "乌审旗";
          break;
        case "150627":
          this.formData.xzqhcode = "150627";
          this.formData.xzqhname = "伊金霍洛旗";
          break;
      }
    },
    goBack() {
      this.$router.go(-1);
    },
    onSubmit() {
      this.$refs.myForm.validate((valid) => {
        if (valid) {
          if (this.button === "新增数据") {
            console.log("数据", this.formData);

            this.$api
              .addNDminfo(this.formData)
              .then((res) => {
                console.log("新增成功", res);
                this.$message.success("新增成功");

                this.goBack();
              })
              .catch((error) => {
                console.error("新增失败", error);
              });
          } else if (this.button === "修改数据") {
            console.log("点击了修改");
            this.$api
              .editNDminfo(this.formData)
              .then((res) => {
                console.log("修改成功", res);
                this.$message.success("修改成功");
                // this.$store.dispatch('animal/fetchAnimalData')
                this.goBack();
              })
              .catch((error) => {
                console.error("修改失败", error);
              });
          }
        } else {
          // 表单校验未通过，不执行提交操作
          return false;
        }
      });

      // if (!this.formData.dmmc) {
      //   this.$message.error("断面名称不能为空");
      //   return;
      // }
    },
    handleChange(value) {
      // 根据选择的行政区划代码更新行政区划名字
      const selectedOption = this.xzqhOptions.find(
        (option) => option.xzqhcode === value
      );
      this.formData.xzqhname = selectedOption ? selectedOption.xzqhname : null;
    },
    handleSzmbChange(value) {
      const selectedOption = this.szmbOptions.find(
        (option) => option.name === value
      );
      if (selectedOption) {
        this.formData.szmbdm = selectedOption.code;
      }
    },
  },
};
</script>

<style scoped>
.page-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  /* font-weight: 700; */
}

.scrollable-form {
  width: 600px;
}

.form-wrapper {
  /* flex: 1; */
  height: 600px;
  overflow-y: auto;
  /* border: 1px solid #ccc;  */
  padding: 40px;
  border-bottom: none;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.el-form-item {
  margin-bottom: 25px;
}

.btn {
  padding: 60px;
  /* border-top: 1px solid #ccc; */
  position: sticky; /* 使按钮固定在底部 */
  bottom: 0; /* 使按钮固定在底部 */
  background-color: #fff; /* 添加背景色，以便在滚动时覆盖表单部分 */
}
</style>
